import * as React from 'react';
import { Select } from './Select';
import { select } from '../markdoc/tags';

interface Option {
  value: string;
  label: string;
}

interface SelectSlideContainerProps {
  children: React.ReactNode;
}

export function SelectSlideContainer({ children }: SelectSlideContainerProps) {
  const arr = React.Children.toArray(children);
  const selectArr = arr.filter(
    (item: any) => item.type && item.type.name == 'Select'
  );
  const slidArr = arr.filter(
    (item: any) => item.type && item.type.name == 'SelectSlide'
  );

  const initialSelectedValues = selectArr.map((item: any) => {
    const firstOption = item.props.options[0];
    return {
      id: item.props.htmlFor,
      value: firstOption.value,
    };
  });

  const [selectedValues, setSelectedValues] = React.useState<
    Array<{ id: string; value: string }>
  >(initialSelectedValues);

  const handleSelectChange = (id: string, value: string, label: string) => {
    setSelectedValues(prevState => {
      const existingIndex = prevState.findIndex(item => item.id === id);
      if (existingIndex !== -1) {
        // 更新现有项
        const newSelectedValues = [...prevState];
        newSelectedValues[existingIndex] = { id, value };
        return newSelectedValues;
      } else {
        // 添加新项
        return [...prevState, { id, value }];
      }
    });
  };

  function areArraysEqualShallow(arr1: any[], arr2: any[]): boolean {
    if (arr1.length !== arr2.length) return false;

    for (let i = 0; i < arr1.length; i++) {
      if (typeof arr1[i] === 'object' && arr1[i] !== null) {
        if (JSON.stringify(arr1[i]) !== JSON.stringify(arr2[i])) return false;
      } else if (arr1[i] !== arr2[i]) {
        return false;
      }
    }

    return true;
  }

  // let slideContent;
  // for (let i = 0; i < slidArr.length; i++) {
  //   const targetArr = slidArr[i].props.target;
  //   if (areArraysEqualShallow(targetArr, selectedValues)) {
  //     slideContent = slidArr[i];
  //     break;
  //   }
  // }

  const [currentSlide, setCurrentSlide] = React.useState(null); // 当前的内容
  const [isTransitioning, setIsTransitioning] = React.useState(false); // 标记动画状态

  React.useEffect(() => {
    console.log('123');
    const findSlideContent = () => {
      for (let i = 0; i < slidArr.length; i++) {
        const slide = slidArr[i];
        if (typeof slide === 'object' && slide !== null && 'props' in slide) {
          const targetArr = slide.props.target;
          if (areArraysEqualShallow(targetArr, selectedValues)) {
            return slide;
          }
        }
      }
      return null;
    };

    if (!isTransitioning) {
      setIsTransitioning(true);
      setTimeout(() => {
        setCurrentSlide(findSlideContent()); // 动画结束后更新内容
        setIsTransitioning(false);
      }, 300); // 动画持续时间
    }
  }, [selectedValues]);

  return (
    <div>
      <div className="selectArea">
        {selectArr.map((item, i) => {
          if (typeof item === 'object' && item !== null && 'props' in item) {
            return (
              <Select
                label={item.props.label}
                htmlFor={item.props.htmlFor}
                options={item.props.options}
                key={i}
                changeOption={(value: string, label: string) =>
                  handleSelectChange(item.props.htmlFor, value, label)
                }
              ></Select>
            );
          }
          return null;
        })}
      </div>
      {/* <div>{slideContent}</div> */}
      <div
        className={`slide-wrapper ${isTransitioning ? 'fade-out' : 'fade-in'}`}
      >
        {currentSlide}
      </div>
      <style jsx>{`
        .selectArea {
          display: flex;
          gap: 24px;
          margin-bottom: 16px;
        }
        .slide-wrapper {
          position: relative;
          overflow: hidden;
          // height: 200px; /* 根据内容高度调整 */
          display: flex;
          // align-items: center;
          // justify-content: center;
          transition: all 0.5s ease-in-out;
        }

        /* 动画效果 */
        .fade-in {
          opacity: 1;
          transform: translateX(0);
        }

        .fade-out {
          opacity: 0;
          transform: translateX(-60%);
        }
      `}</style>
    </div>
  );
}
